import { Statistic } from "antd";
import style from "./style.module.scss";
import type { StoreInfo } from "@/Interface/StoreInfoInterface";
import YearGrowth from "../echarts/YearGrowth";
import Reviews from "../echarts/Reviews";
import { useBasicDataStore } from "@/stores/basicDataStore";

export default function StoreBasicInfo() {

  const basicData = useBasicDataStore(status => status.basicData) as StoreInfo

  const {
    basicInfo: {
      storeId = '',
      storeName = '',
      province = '',
      city = '',
      // coordinates: { lng = '', lat = '' } = {},
      storeType = '',
      areaSize = 0,
      openingDate = '',
      tags: [tag = '无标签'] = ['无标签']
    } = {},
    annualData: {
      avgCustomerValue = 0,
      rating = '',
      reviews: { positive = 0, negative = 0 } = {},
      yearAmount = 0,
      yearGrowth = ''
    } = {}
  } = basicData || {};

  return (
    <>
      <div className={`${style.size} ${style.storeInfo}`}>
        <div className={style.head}>
          <h3>{storeName}</h3>
          <p>{province} {city}</p>
        </div>
        <div className={style.content}>
          <div className={style.row}>
            <Statistic title="连锁方式" value={storeType} />
            <Statistic title="类型划分" value={tag} />
            <Statistic title="开业日期" value={openingDate} />
            <Statistic title="占地面积" value={areaSize + ' m³'} />
          </div>
          <div className={style.row}>
            <Statistic title="年营业额" value={(yearAmount / 10000).toFixed(2) + ' 万元'} />
            <Statistic title="综合评分" value={rating + ' 分'} />
            <Statistic title="客单价" value={avgCustomerValue + ' 元/人'} />
            <Statistic title="标识号" value={storeId} groupSeparator='' />
          </div>
          <ul className={style.charts}>
            <li><YearGrowth yearGrowth={yearGrowth as string} /></li>
            <li><Reviews reviews={[positive, negative] as number[]} /></li>
          </ul>
        </div>
      </div>
    </>
  )
}
